<template>
<div>
  <van-nav-bar
      title="我的优惠券"
      left-arrow
      @click-left="$router.back()"
  />
    <div v-if="coupon.length>0">
      <div class="abox" v-for="item in coupon" :key='item.couponId' >
        <div class="bbox">
          <div>￥</div>
          <div>{{item.couponShow.couponShowMoney}}</div>
        </div>
      <div class="box"></div>
        <div>
          <div class="cbox">{{item.couponShow.couponShowName}}</div>
          <div class="dbox">有效期：{{formatDate(item.couponShow.couponStartTime)}}至{{formatDate(item.couponShow.couponEndTime)}}</div>
          <div class="ebox">
            <van-button plain hairline round size="small" @click="useCoupon()" v-if="item.couponUserType==0">立即使用</van-button>
            <van-button plain hairline round size="small" v-if="item.couponUserType==1">已使用</van-button>
            <van-button plain hairline round size="small" v-if="item.couponUserType==1">已过期</van-button>
          </div>
        </div>
      </div>
    </div>
    <div v-else>
      <van-skeleton title :row="3" />
    </div>
</div>
</template>
<script>
import { Toast } from 'vant';
export default {
name: "myCoupon",
  data() {
    return {
      coupon:[],
      userId:''
    };
  },
  created(){
    this.userId=JSON.parse(sessionStorage.getItem('user')).userId
    this.getCoupon()
    
  },
  methods: {
    getCoupon(){
          this.$axios.post('/api/agoCoupon/userAll?userId='+this.userId).then(res=>{
            console.log(res)
            if(res.data.code==200){
               this.coupon=res.data.data
               console.log(this.coupon) 
              //couponUserType 0未使用 1已使用 2已过期
            }else{
              Toast.fail(res.data.msg)
            }
        })
      },
    useCoupon(){
      this.$router.push('/category')
    },
    formatDate(date){
      var newdate = new Date(date)
      var y = newdate.getFullYear().toString()
      var m = (newdate.getMonth()+1).toString().length>10?(newdate.getMonth()+1).toString():'0'+(newdate.getMonth()+1).toString()
      var d = newdate.getDate().toString()>10?newdate.getDate().toString():'0'+newdate.getDay().toString()
      return y+'-'+m+'-'+d
    }
  },
}
</script>

<style scoped>
.abox{
  width: 86%;
  height: 100px;
  display: flex;
  background-image: linear-gradient(to right, #FF6932, #FFC80D);
  border-radius: 10px;
  margin: 20px auto 0;
  padding: 0 10px;
}

.bbox{
  width: 100px;
  display: flex;
  
}
.bbox>div:first-child{
  width: 30%;
  height: 100px;
  line-height: 100px;
  color: white;
  font-size: 20px;
}
.bbox>div:nth-child(2){
  width: 70%;
  height: 100px;
  line-height: 100px;
  color: white;
  font-size: 55px;
  font-weight: bold;
  text-align: left;
  font-family: '楷体';
  padding-right: 5px;
}
.box{
  width: 20px;
  background-image:-webkit-gradient(
  linear,
  50% 50%,
  0 100%,
  from(transparent),
  color-stop(.5,transparent),
  color-stop(.5,white),
  to(white));
  background-size:14px 7px;
  background-repeat:repeat-y;
  background-position:0 100%;
  position: relative;
}
.cbox{
  color: white;
  font-size: 18px;
  font-weight: bold;
  margin-top: 5px;
  margin-bottom: 7px;
  text-align: left;
  padding-left: 10px;
}
.dbox{
  color: white;
  font-size: 15px;
  margin-top: 5px;
  margin-bottom: 7px;
  text-align: left;
  padding-left: 10px;
}
.ebox{
  width: 240px;
  text-align: right;
  color: white;
}
.ebox button{
  color: red;
}
</style>